<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 基础语法</title>
    <style>

        .d1{
            width: 100px;
            height: 100px;
            background-color: orange;
        }
        .d2{
            width: 50px;
            height: 50px;
            background-color: blue;
        }
        table{
            border:1px solid blue;
            border-collapse: collapse;
        }
        td{
            border:1px solid blue;
        }
        .active{
            color:red;
        }
        .b{
            background-color: lightyellow;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
    <h3>1. 双向数据绑定<hr> </h3>
    <div id="d1">
        {{msg}} <br>
        <input type="text" v-model="msg"> <br>
        <input type="button" value="+" v-on:click="add">
        {{num}}
        <input type="button" value="-" @click="minus"> <!--将v-on可以简化写成@-->
        <br>
        请选择你的兴趣爱好：<hr>
        <input type="checkbox" v-model="language" value="Java" />Java<br/>
        <input type="checkbox" v-model="language" value="PHP" />PHP<br/>
        <input type="checkbox" v-model="language" value="Swift" />Swift<br/>
        你的兴趣爱好如下：<hr>
        {{language.join(",")}} <br>
        <h3>2.解决事件冒泡(stop)：</h3>
        <div class="d1" @click="d1clickHandler">
            <div class="d2" @click.stop="d2clickHandler"></div>
        </div>
        <h3>3.按键修饰符：</h3>
        <input type="text" @keyup.enter="submit"> <br>      <!-- enter键 -->
        <input type="text" @keyup.ctrl.alt.c="submit">      <!-- ctrl+alt+c -->
        <br>
        <h3>4.数据的遍历:</h3>
        <hr>
        <table>
            <tr>
                <td>图书id</td>
                <td>图书名称</td>
                <td>作者</td>
                <td>价格</td>
                <td>出版社</td>
            </tr>
            <!--v-if与v-for联合使用-->
            <tr v-for="book in books" v-bind:key="book.bid" v-if="book.price > 80">
                <td>{{book.bid}}</td>
                <td>{{book.bname}}</td>
                <td>{{book.bauthor}}</td>
                <td>{{book.price}}</td>
                <td>{{book.publisher}}</td>
            </tr>
        </table>
        <h3>5. v-if与v-show的区别：</h3>
        <!--前者是将层彻底地删除，而后者只是使用display：none对层进行了隐藏-->
        <input type="button" value="切换显示" @click="show = !show"> <br>
        <div v-if="show">
            你好1
        </div>
        <div v-show="show">
            你好2
        </div>
        <h3>6. v-bind绑定样式</h3>
        <!--6.1 绑定的样式值是isActive数组的内容作为样式名-->
        <input type="text" v-bind:class="isActive"> <br>
        <!--6.2 绑定active的样式是否起作用取决于变量aa的值，如果aa=true,则有active样式，否则，没有-->
        <!--<input type="text" v-bind:class="{active:aa}"> <br>-->
        <!--可以简写为如下形式：-->
        <input type="text" :class="{active:aa}"> <br>
        <h3>7. 计算属性compute</h3>
        <!--7.1 没有使用计算属性的情况：-->
        你的出生日期是：{{ new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDate()}}
        <br>
        <!--7.2 使用计算属性后：-->
        你的出生日期是：{{birth}}
    </div>
</body>
</html>
<script>
    let vs = new Vue({
        el: '#d1',
        //模型层：封装数据
        data:{
            msg:'hello,world',
            num:1,
            language:[],
            books:[
                {'bid': 1001,'bname':'《三国演义》','bauthor':'罗贯中','price':100,'publisher':'中国青年出版社'},
                {'bid': 1002,'bname':'《西游记》','bauthor':'吴承恩','price':90,'publisher':'中国政治出版社'},
                {'bid': 1003,'bname':'《水浒传》','bauthor':'施耐庵','price':80,'publisher':'中国青年出版社'},
            ],
            show:true,
            isActive: ['active','b'],
            aa:true,
            birthday:1529032123201 // 毫秒值
        },
        //计算属性
        computed:{
            birth(){
                //1. 构造一个日期
                let dt = new Date(this.birthday)
                //2. 得到日期的各个部分
                const year = dt.getFullYear();
                const month = dt.getMonth();
                const day = dt.getDate();
                //3. 拼接字符串并返回
                return `${year}-${month}-${day}`
            }
        },
        watch:{
          //监控变量msg的值的变化
          msg(newV,oldV){
              console.log("旧值：" + oldV, '新值：' + newV)
          }
        },
        //定义普通方法
        methods:{
            //1. 添加num的值
            add(){
                this.num++;
            },
            //2. 减少num的值
            minus(){
                this.num--;
                if(this.num <= 0){
                    this.num = 1;
                }
            },
            //3. 点击d1
            d1clickHandler(){
                alert("d1 clicked.")
            },
            //4. 点击d2
            d2clickHandler(){
                alert("d2 clicked.")
            },
            //5. 事件修饰符
            submit(){
                console.log("事件修饰符.")
            }
        },
        //生命周期的后回调函数
        beforeCreate(){
            console.log("beforeCreate")
        },
        //在此节点上可以从后端取数据
        created(){
            console.log("created")
        },
        beforeMount(){
            console.log("beforeMount")
        },
        //在此节点上可以从后端取数据
        mounted(){
            console.log("mounted.")
        },
        beforeUpdate(){
            console.log("beforeUpdate")
        },
        updated(){
            console.log("updated")
        },
        beforeDestroy(){
            console.log("beforeDestroy")
        },
        destroyed(){
            console.log("destroyed")
        }

    });
</script>